<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!-- 버튼이 있는 경우 -->
<div class="ddp-wrap-edit {{containerClass}}" *ngIf="isShowButtons">
  <label class="ddp-label-type">{{title}}</label>

  <!-- edit option -->
  <div class="ddp-ui-edit-option ddp-inline" *ngIf="dateType">
    <label class="ddp-label-radio"
           (change)="selectedDate = 'CREATED'">
      <input type="radio" [checked]="selectedDate === 'CREATED'">
      <i class="ddp-icon-radio"></i>
      <span class="ddp-txt-radio">{{'msg.comm.ui.list.created' | translate}}</span>
    </label>
    <label class="ddp-label-radio"
           (change)="selectedDate = 'MODIFIED'">
      <input type="radio" [checked]="selectedDate === 'MODIFIED'">
      <i class="ddp-icon-radio"></i>
      <span class="ddp-txt-radio">{{'msg.comm.ui.list.updated' | translate}}</span>
    </label>
  </div>
  <!-- //edit option -->
  <!-- edit option -->
  <div class="ddp-ui-edit-option ddp-inline" *ngIf="usedCustomDateType">
    <label class="ddp-label-radio" *ngFor="let date of customDateTypeList"
           (change)="onChangeSelectedDateType(date)">
      <input type="radio" [checked]="selectedDate === date.value">
      <i class="ddp-icon-radio"></i>
      <span class="ddp-txt-radio">{{date.label}}</span>
    </label>
  </div>
  <!-- //edit option -->

  <!-- edit option -->
  <div class="ddp-ui-edit-option">

    <a href="javascript:" class="ddp-btn-toggle ddp-all" [ngClass]="{'ddp-selected' : periodType.ALL === selectedType}" *ngIf="useAllButton" (click)="setAll();$event.stopImmediatePropagation()">{{'msg.comm.ui.list.all' | translate}}</a>
    <a href="javascript:" class="ddp-btn-toggle ddp-today" [ngClass]="{'ddp-selected' : periodType.TODAY === selectedType}" (click)="setToday();$event.stopImmediatePropagation()">{{'msg.comm.btn.today' | translate}}</a>
    <a href="javascript:" class="ddp-btn-toggle ddp-last" [ngClass]="{'ddp-selected' : periodType.LAST_WEEK === selectedType}" (click)="setLastWeek();$event.stopImmediatePropagation()">{{'msg.comm.btn.last-7-days' | translate}}</a>

    <div class="ddp-ui-calen ddp-clear" style="width:320px;">

      <div class="ddp-box-calen">
        <input #startPickerInput type="text" class="ddp-input-typebasic ddp-data-calen" placeholder="{{ startPlaceholder | translate }}" readonly/>
      </div>
      <span class="ddp-bar">~</span>
      <div class="ddp-box-calen">
        <input #endPickerInput type="text" class="ddp-input-typebasic ddp-data-calen" placeholder="{{ endPlaceholder | translate }}" readonly/>
      </div>
    </div>
    <a href="javascript:" class="ddp-btn-line-s" (click)="done()">{{'msg.page.btn.apply' | translate}}</a>
  </div>
  <!-- //edit option -->
</div>

<div class="ddp-ui-calen" *ngIf="!isShowButtons">

  <div class="ddp-box-calen" [ngClass]="{'ddp-disabled' : disabled}">
    <input #startPickerInput type="text" class="ddp-input-typebasic ddp-data-calen" placeholder="{{ startPlaceholder | translate }}" readonly/>
  </div>
  <span class="ddp-bar">~</span>
  <div class="ddp-box-calen" [ngClass]="{'ddp-disabled' : disabled}">
    <input #endPickerInput type="text" class="ddp-input-typebasic ddp-data-calen" placeholder="{{ startPlaceholder | translate }}" readonly/>
  </div>
</div>
